<template>
  <div class="lin_main_page_login_form" v-if="isOpen">
    <form class="form">
      <div class="login_close">
        <a @click="loginClose">
          <el-icon size="20"><CloseBold /></el-icon>
        </a>
      </div>
      <div class="flex-column">
        <label>Email </label></div>
      <div class="inputForm">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" height="20"><g data-name="Layer 3" id="Layer_3"><path d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path></g></svg>
        <input placeholder="Enter your Email" v-model="email" required class="input" type="text">
      </div>

      <div style="line-height: 40px">
        <div>
          <div class="flex-column">
            <label>Password </label>
          </div>
          <div class="inputForm">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-64 0 512 512" height="20"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>
            <input placeholder="Enter your Password" required v-model="password" class="input" type="password">
          </div>
        </div>

        <div v-if="!isLogin">
          <div class="flex-column">
            <label>Confirm Password </label>
          </div>
          <div class="inputForm">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-64 0 512 512" height="20"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>
            <input placeholder="Enter your Password"  required v-model="confirmPassword" class="input" type="password">
          </div>
        </div>
      </div>

      <div class="flex-row">
        <div>
          <a>SMS verification code login</a>
        </div>
        <span class="span">Forgot password?</span>
      </div>
      <div class="radio">
        <el-radio v-model="radio" label="1" border size="small">
          I have read and agree to the User Service Agreement and Privacy Policy.
        </el-radio>
      </div>
      <button class="button-submit" type="button" @click="submit">
        <span>{{ isLogin ? 'Sign In' : 'Sign up' }}</span>
      </button>
      <p class="p">
        {{ isLogin ? "Don't have an account?" : "Return to !" }}
        <span class="span" @click="signUp">
          {{isLogin ? 'Sign Up' : 'Log in'}}
        </span>
      </p>
    </form>
  </div>
</template>
<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue';
import { useAuth} from "~/utils/login/sign";
import { ElNotification } from 'element-plus';

interface Props {
  isOpen?: boolean;
}
const props = withDefaults(defineProps<Props>(),{
    isOpen: true
})
const isLogin = ref(true);
const {handleSubmit, toLogin} = useAuth();
const email = ref();
const password = ref();
const confirmPassword = ref();
const radio = ref(false);
const emit = defineEmits()

const loginClose = () => {
  emit('update:isOpen', false)
};

const signUp = async () => {
  isLogin.value = !isLogin.value;
}

const submit = async () => {
  if (!password.value  || !email.value ) {
    ElNotification({
      title: 'Warning',
      message: '账号或密码为空，请重新输入！',
      type: 'warning',
      duration: 1000
    });
    return
  }
  if(!radio.value){
    ElNotification({
      title: 'Warning',
      message: '请勾选用户条款！',
      type: 'warning',
      duration: 1000
    });
    return
  }
  if (isLogin.value && password.value) {
    await handleSubmit(email.value, password.value, isLogin.value);
  }
  else if (!isLogin.value && password.value === confirmPassword.value) {
    await handleSubmit(email.value, password.value, isLogin.value);
    if (toLogin.value) {
      isLogin.value = !isLogin.value;
    }
    isLogin.value = toLogin.value;
  }
  else {
    ElNotification({
      title: 'Warning',
      message: '密码或账号错误，请重新输入！',
      type: 'warning',
      duration: 1000
    });
    return
  }
};



</script>

<style scoped lang="scss">
.lin_main_page_login_form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: all 0.2s;
  background-color: rgba(0, 0, 0, 0.5); /* 灰色半透明背景 */
  display: flex; /* 使用Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 1;
  overflow: hidden;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #ffffff;
  padding: 30px;
  width: 450px;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form button {
  align-self: flex-end;
}

.flex-column > label {
  color: #151717;
  font-weight: 600;
}

.inputForm {
  border: 1.5px solid #ecedec;
  border-radius: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: 0.2s ease-in-out;
}

.input {
  margin-left: 10px;
  border-radius: 10px;
  border: none;
  width: 85%;
  height: 100%;
}

.input:focus {
  outline: none;
}

.inputForm:focus-within {
  border: 1.5px solid #2d79f3;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 0;
}

.flex-row > div > label {
  font-size: 14px;
  color: black;
  font-weight: 400;
}


.span {
  font-size: 14px;
  margin-left: 5px;
  color: #2d79f3;
  font-weight: 500;
  cursor: pointer;
}

.button-submit {
  margin: 20px 0 10px 0;
  background-color: #151717;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  height: 50px;
  width: 100%;
  cursor: pointer;
}

.button-submit:hover {
  background-color: #252727;
}

.p {
  text-align: center;
  color: black;
  font-size: 14px;
  margin: 5px 0;
}

.btn {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  gap: 10px;
  border: 1px solid #ededef;
  background-color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.btn:hover {
  border: 1px solid #2d79f3;
}

.login_close {
  display: flex;
  margin-left: 400px;
  margin-bottom: 20px;
}


.login_close a {
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.login_close a:hover {
  transform: scale(1.3);
}

</style>